<template>
  <div class="goods" v-cloak>
    <form action="/" class="search">
      <van-search
        v-model="value"
        show-action
        shape="round"
        class="v-search"
        action-text=" "
        background="#ff5000"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @focus="goDetail('/goods/goodsfind', value)"
      />
    </form>
    <div v-if="isShow">
      <van-list
        class="goods-list"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="goods-list-item"
          v-for="(good, index) in goods"
          :key="index"
          @click="goDetail('/goods/goodsinfo', good.goods_id)"
        >
          <div class="img-box">
            <img v-lazy="good.goods_small_logo" />
          </div>
          <h3 class="title">
            {{ good.goods_name }}
          </h3>
          <div class="info">
            <p class="price">
              <span class="new">￥{{ good.goods_price }}</span>
            </p>
            <p class="sell">
              <span>热卖中</span>
              <span>剩余{{ good.goods_number }}件</span>
            </p>
          </div>
        </div>
      </van-list>
    </div>
    <div v-else>很抱歉!暂时没有你搜索的商品!</div>
  </div>
</template>
<script>
import { getGoods } from '../../../api/goods'
export default {
  data() {
    return {
      value: '',
      goods: [],
      page: 0, // 先设置为从0开始,进入函数先加1,实现从第一页开始
      limit: 6, // 分页的一页的页数限制
      loading: false,
      finished: false, // loading和finished控制加载状态,当组件滚动到底部触发load事件,数据如果全部加载完毕,设置finished为true
      count: 0,
      isShow: true
    }
  },
  methods: {
    onSearch(val) {
      this.getGoods()
    },
    // 获取商品列表和分页函数
    async getGoods() {
      ++this.page
      const res = await getGoods({ str: this.value, page: this.page, limit: this.limit })
      this.goods = this.goods.concat(res.data.message.goods)
      if (this.goods.length !== 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }
      this.goods.forEach(item => {
        if (item.goods_small_logo === '') {
          item.goods_small_logo = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013e3258ddb8c1a801219c77499b95.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638434283&t=4d02c4ab3958765ce49acb50c9bf580d'
        }
      })
      this.count = res.data.message.total
    },
    async onLoad() {
      setTimeout(async () => {
        await this.getGoods()
        this.loading = false
        if (this.goods.length >= this.count) {
          this.finished = true
        }
      }, 500)
    }
  },
  created() {
    this.getGoods()
  },
  watch: {
  }
}
</script>
<style lang="scss" scoped>
[v-cloak] {
  display: none;
}

.goods {
  position: relative;
  top: -45px;
  padding-top: 50px;
  .v-search {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .goods-list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .goods-list-item {
      border-radius: 6px;
      width: 49%;
      border: 1px solid #ddd;
      padding: 10px 10px 0 10px;
      box-sizing: border-box;
      margin-bottom: 5px;
      background: #fff;
      .img-box {
        width: 149px;
        height: 149px;
        img {
          width: 100%;
        }
      }
      .title {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .info {
        font-size: 12px;
        .price {
          display: flex;
          justify-content: space-between;
          .new {
            color: red;
          }
        }
        .sell {
          display: flex;
          justify-content: space-between;
        }
      }
    }

    .van-.van-list__error-text,
    .van-list__finished-text,
    .van-list__loading {
      width: 100%;
    }
  }
}
</style>